<template>
  <fs-page class="fs-page-warp">
    <fs-crud ref="crudRef" v-bind="crudBinding" />
  </fs-page>
</template>

<script lang="ts">
import { defineComponent, nextTick, onMounted } from "vue";
import {
  AddReq,
  CreateCrudOptionsProps,
  CreateCrudOptionsRet,
  DelReq,
  dict,
  EditReq,
  useFs,
  UserPageQuery,
  UserPageRes,
  compute
} from "@fast-crud/fast-crud";
import {
  putV1OmsMenu,
  postV1OmsMenu,
  getV1OmsMenuTree,
  getV1OmsMenuDetail,
  deleteV1OmsMenuDetail
} from "@/api/oms/menu";
import { convertTreeToCustomFields } from "@/utils/tree";
import { hasAuth, getTreeAllMenu } from "@/router/utils";

//此处为crudOptions配置
const createCrudOptions = function ({
  crudExpose
}: CreateCrudOptionsProps): CreateCrudOptionsRet {
  //本地模拟后台crud接口方法 ----开始

  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
    const { data } = await getV1OmsMenuTree({
      ...query.page
    });
    return {
      records: data.result,
      total: data.result.length
    };
  };

  const editRequest = async ({ form, row }: EditReq) => {
    if (form.component && !form.path) {
      form.path = form.component;
      let originalString = form.component;
      if (originalString.charAt(0) === "/") {
        originalString = originalString.substring(1);
      }
      form.perms = originalString.replace(/\//g, ":");
    }
    const { obj } = await putV1OmsMenu({ id: row.id, ...form });
    return obj;
  };

  const delRequest = async ({ row }: DelReq) => {
    const { obj } = await deleteV1OmsMenuDetail(row);
    return obj;
  };

  const addRequest = async ({ form }: AddReq) => {
    if (form.component) {
      form.path = form.component;
      let originalString = form.component;
      if (originalString.charAt(0) === "/") {
        originalString = originalString.substring(1);
      }
      form.perms = originalString.replace(/\//g, ":");
    }
    const { obj } = await postV1OmsMenu(form);
    return obj;
  };
  const treeList = getTreeAllMenu();
  const onRowBtnClick = async rowHandle => {
    if (rowHandle.initialForm.id) {
      const { obj } = await getV1OmsMenuDetail({ id: rowHandle.row.id });
      crudExpose.setFormData(obj);
    }
  };
  return {
    crudOptions: {
      request: {
        pageRequest,
        editRequest,
        delRequest,
        addRequest
      },
      form: {
        wrapper: {
          is: "el-drawer",
          size: "800px",
          onOpen: onRowBtnClick
        },
        initialForm: {
          isCache: false,
          isFrame: false,
          sort: 0,
          status: true,
          type: "M",
          visible: true
        },
        labelPosition: "right",
        labelWidth: "120px" //表单label宽度
      },
      actionbar: {
        buttons: {
          add: {
            show: hasAuth("oms:menu:add"),
            text: "新增",
            click() {
              nextTick(() => {
                crudExpose.openAdd({ row: { parentMenuId: "0" } });
              });
            }
          }
        }
      },
      rowHandle: {
        fixed: "right",
        align: "center",
        width: 220,
        buttons: {
          custom: {
            order: 1,
            type: "success",
            show: hasAuth("oms:menu:add"),
            plain: false,
            text: "新增",
            click(context: any) {
              nextTick(() => {
                crudExpose.openAdd({
                  row: { parentMenuId: context?.row?.id || "0" }
                });
              });
            }
          },
          view: {
            type: "warning",
            show: hasAuth("oms:menu:detail"),
            order: 2,
            plain: false
          },
          edit: {
            show: hasAuth("oms:menu:update"),
            dropdown: true,
            plain: true,
            order: 3
          },
          remove: {
            show: hasAuth("oms:menu:remove"),
            dropdown: true,
            plain: true,
            order: 4
          }
        },
        dropdown: {
          // 操作列折叠，dropdown参数配置
          // 至少几个以上的按钮才会被折叠
          // atLeast: 3, //TODO 注意 [atLeast]参数即将废弃，请给button配置dropdown即可放入折叠
          more: {
            //更多按钮配置
            text: "更多",
            icon: null
          }
        }
      },
      search: { show: false, autoSearch: false },
      pagination: { show: false },
      columns: {
        id: {
          title: "ID",
          type: "text",
          search: { show: false },
          column: {
            show: false,
            resizable: true,
            minWidth: 140,
            align: "center"
          },
          editForm: { show: false },
          addForm: { show: false }
        },
        name: {
          title: "菜单名称",
          type: "text",
          search: { show: true },
          column: {
            show: true,
            resizable: true,
            minWidth: 300,
            align: "left"
          },
          editForm: { rules: [{ required: true, message: "请输入菜单名称" }] },
          addForm: { rules: [{ required: true, message: "请输入菜单名称" }] }
        },
        parentMenuId: {
          title: "上级目录",
          type: "dict-tree",
          form: {
            component: {
              props: {
                props: {
                  checkStrictly: true
                }
              },
              defaultExpandAll: true,
              checkStrictly: true
            }
          },
          dict: dict({
            isTree: true,
            label: "name",
            value: "id",
            getData: async () => {
              // 覆盖全局获取字典请求配置
              const { data } = await getV1OmsMenuTree();
              return convertTreeToCustomFields(
                [
                  {
                    id: "0",
                    name: "一级目录",
                    children: data.result
                  }
                ],
                {
                  id: "id",
                  parent: "parentMenuId",
                  leader: "leaderStaffId",
                  name: "name"
                }
              );
            }
          }),
          search: { show: false },
          column: {
            show: false,
            resizable: true,
            minWidth: 140,
            align: "center"
          },
          editForm: { rules: [{ required: true, message: "请输入ID" }] },
          addForm: { rules: [{ required: true, message: "请输入ID" }] }
        },
        type: {
          title: "菜单类型",
          type: "dict-radio",
          search: { show: false },
          form: {
            col: {
              span: 24
            }
          },
          column: {
            show: true,
            resizable: true,
            minWidth: 90,
            align: "center"
          },
          dict: dict({
            data: [
              { value: "M", label: "目录" },
              { value: "C", label: "菜单" },
              { value: "F", label: "按钮" }
            ]
          }),
          editForm: { rules: [{ required: true, message: "请选择菜单类型" }] },
          addForm: { rules: [{ required: true, message: "请选择菜单类型" }] }
        },
        perms: {
          title: "权限标识",
          type: "text",
          search: { show: false },
          form: {
            show: compute(({ form }) => {
              return form.type !== "C";
            })
          },
          column: {
            show: true,
            resizable: true,
            minWidth: 250,
            align: "center"
          },
          editForm: { rules: [{ required: true, message: "请输入权限标识" }] },
          addForm: { rules: [{ required: true, message: "请输入权限标识" }] }
        },
        path: {
          title: "路由地址",
          type: "text",
          search: { show: false },
          form: {
            show: compute(({ form }) => {
              return form.type === "M" || form.type === "C";
            })
          },
          column: {
            show: true,
            resizable: true,
            minWidth: 140,
            align: "center"
          },
          editForm: { rules: [{ required: true, message: "请输入访问路径" }] },
          addForm: { rules: [{ required: true, message: "请输入访问路径" }] }
        },
        isFrame: {
          title: "外链",
          type: "dict-radio",
          search: { show: false },
          form: {
            show: compute(({ form }) => {
              return form.type !== "F";
            })
          },
          column: {
            show: true,
            resizable: true,
            minWidth: 80,
            align: "center"
          },
          dict: dict({
            data: [
              { value: false, label: "否" },
              { value: true, label: "是" }
            ]
          }),
          editForm: {
            rules: [{ required: true, message: "请选择是否为外链" }]
          },
          addForm: { rules: [{ required: true, message: "请选择是否为外链" }] }
        },
        isCache: {
          title: "缓存",
          type: "dict-radio",
          search: { show: true },
          form: {
            show: compute(({ form }) => {
              return form.type !== "F";
            })
          },
          column: {
            show: true,
            resizable: true,
            minWidth: 90,
            align: "center"
          },
          dict: dict({
            data: [
              { value: true, label: "缓存" },
              { value: false, label: "不缓存" }
            ]
          }),
          editForm: { rules: [{ required: true, message: "请选择是否缓存" }] },
          addForm: { rules: [{ required: true, message: "请选择是否缓存" }] }
        },
        status: {
          title: "状态",
          type: "dict-radio",
          search: { show: true },
          form: {
            show: compute(({ form }) => {
              return form.type !== "F";
            })
          },
          column: {
            show: true,
            resizable: true,
            minWidth: 80,
            align: "center"
          },
          dict: dict({
            data: [
              { value: false, label: "停用" },
              { value: true, label: "正常" }
            ]
          }),
          editForm: { rules: [{ required: true, message: "请选择菜单状态" }] },
          addForm: { rules: [{ required: true, message: "请选择菜单状态" }] }
        },
        visible: {
          title: "显示",
          type: "dict-radio",
          search: { show: false },
          form: {
            show: compute(({ form }) => {
              return form.type !== "F";
            })
          },
          column: {
            show: true,
            resizable: true,
            minWidth: 80,
            align: "center"
          },
          dict: dict({
            data: [
              { value: false, label: "隐藏" },
              { value: true, label: "显示" }
            ]
          }),
          editForm: { rules: [{ required: true, message: "请选择显示状态" }] },
          addForm: { rules: [{ required: true, message: "请选择显示状态" }] }
        },
        component: {
          title: "组件路径",
          type: "dict-tree",
          search: { show: false },
          form: {
            show: compute(({ form }) => {
              return form.type === "C";
            })
          },
          column: {
            show: true,
            resizable: true,
            minWidth: 140,
            align: "center"
          },
          dict: dict({
            data: treeList
          }),
          editForm: { rules: [{ required: true, message: "请选择文件路径" }] },
          addForm: { rules: [{ required: true, message: "请选择文件路径" }] }
        },
        query: {
          title: "路由参数",
          type: "text",
          search: { show: false },
          form: {
            show: compute(({ form }) => {
              return form.type === "C";
            })
          },
          column: {
            show: true,
            resizable: true,
            minWidth: 140,
            align: "center"
          }
        },
        sort: {
          title: "显示顺序",
          type: "text",
          search: { show: false },
          column: {
            show: true,
            resizable: true,
            minWidth: 140,
            align: "center"
          },
          editForm: { rules: [{ required: true, message: "请输入显示顺序" }] },
          addForm: { rules: [{ required: true, message: "请输入显示顺序" }] }
        },
        remark: {
          title: "备注",
          type: "textarea",
          search: { show: false },
          form: {
            col: {
              span: 24
            }
          },
          column: {
            show: false,
            resizable: true,
            minWidth: 140,
            align: "center"
          }
        },
        createTime: {
          title: "创建时间",
          type: "date",
          search: { show: false },
          column: {
            show: false,
            resizable: true,
            minWidth: 140,
            align: "center"
          },
          editForm: { show: false },
          addForm: { show: false }
        },
        editTime: {
          title: "编辑时间",
          type: "date",
          search: { show: false },
          column: {
            show: false,
            resizable: true,
            minWidth: 140,
            align: "center"
          },
          editForm: { show: false },
          addForm: { show: false }
        }
      }
    }
  };
};

//此处为组件定义
export default defineComponent({
  name: "omsmenu",
  setup() {
    // 演示自定义变量传递, 将会传递给createCrudOptions
    const customValue: any = {};
    //  =======你可以简写为下面这一行========
    const { crudRef, crudBinding, crudExpose } = useFs({
      createCrudOptions,
      context: customValue
    });

    // 页面打开后获取列表数据
    onMounted(() => {
      crudExpose.doRefresh();
    });
    return {
      crudBinding,
      crudRef
    };
  }
});
</script>
